<template>
  <ListArea :fnGetIDList="fnGetIDList" :fnGetItem="fnGetItem"></ListArea>
</template>

<script>
import { inject } from "vue";
import ListArea from "./ListArea.vue";

export default {
  name: "ProductShelf",
  components: {
    ListArea,
  },
  setup() {
    const itemType = "book";
    const apis = inject("$apis")
    const mall = apis.mall;
    // let rawList = [
    //   {
    //     name: "hello",
    //     points: 500,
    //     itemType: "book",
    //     itemID: 0,
    //     imgUrl:
    //       "https://img0.baidu.com/it/u=1553451661,4171997691&fm=26&fmt=auto&gp=0.jpg",
    //   },
    // ];

    
    async function fnGetIDList() {
      // apis.helloWorld()
      let resp = await mall.getProductList({
        itemType: itemType,
      });
      let productIDs = resp['ids']
      return productIDs;
    }
    async function fnGetItem(itemID) {
      let item = await mall.getProductSummary({
        itemType: itemType,
        itemID: itemID,
      });
      return item;
    }
    return {
      fnGetIDList,
      fnGetItem,
    };
  },
};
</script>

<style scoped>
</style>
